<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>论坛</title>
    <link href="css/bbs.css" rel="stylesheet">
    <script src="jquery.js"></script>
</head>

<body>
    <div class="bbs">
        <header>
            <span onclick="add()">我要发帖</span>
        </header>
        <section id="main">
            <ul id="mainlist">
                <li>
                    <h1>aa</h1>
                    <p>
                        <span>版块：Java交流专区  内容:2</span>
                        <input type="button" name="del" class="delbtn" value="删除" onclick="del(this)">
                    </p>
                </li>
            </ul>
        </section>
        <div class="post">
            <input id="title" class="title" placeholder="请输入标题（1-50个字符）">所属版块：
            <select id="channel">
                <option>请选择版块</option>
                <option>Python交流专区</option>
                <option>Java交流专区</option>
                <option>Web交流专区</option>
            </select>
            <textarea id="content" class="content"></textarea>
            <input class="btn" value="发布" onclick="create()">
            <input class="btn" value="关闭" onclick="closing()">
        </div>
    </div>
</body>
<script>
    // 点击“我要发贴”
    function add() {
        $(".post").show()

    }
    // 点击“关闭”
    function closing() {
        $(".post").hide()
        $("#title").val("")
        $("#channel").val("请选择版块")
        $("#content").val("")
    }
    // 点击“发布”
    function create() {
        const title = $("#title").val()
        const channel = $("#channel").val()
        const content = $("#content").val()
        console.log(title,channel,content)
        if(title == ""){
            alert("请填写标题")
            return;
        }
        if(channel=="请选择版块"){
            alert('请选择版块')
            return
        }
        if(content == ""){
            alert("请填写内容")
            return;
        }
        $("#mainlist").prepend(`<li>
                    <h1>${title}</h1>
                    <p>
                        <span>版块：${channel}  内容:${content}</span>
                        <input type="button" name="del" class="delbtn" value="删除" onclick="del(this)">
                    </p>
                </li>`)

        $(".post").hide()
        $("#title").val("")
        $("#channel").val("请选择版块")
        $("#content").val("")
    }
    // 点击“删除”
    function del(obj) {
       $(obj).parents("li").remove()
    }
</script>

</html>